<template>
  <div class="tt_wrap">
    <div class="top">
      <!-- // 组件 -->
      <div
        class="box_img"
        :style="`background-image:url(${albumInfo.cover});`"
      ></div>
      <div class="box">
        <top-open></top-open>
        <!-- // 组件 -->
        <div class="info" @click="goZhubo">
          <div class="img">
            <img v-lazy="albumInfo.cover" alt="" />
            <span class="s_icon"></span>
            <div class="count" v-if="albumInfo.statCountInfo">
              <van-icon name="service-o" />{{
                albumInfo.statCountInfo.playCount | getCount
              }}
            </div>
          </div>
          <div class="txt">
            <div class="title">{{ albumInfo.title }}</div>
            <div class="author">
              <div class="tou">
                <img :src="userInfo.img" alt="" />
              </div>
              <div class="name">{{ userInfo.nickname }}</div>
            </div>
            <p class="count" v-if="albumInfo.statCountInfo">
              已订阅{{ albumInfo.statCountInfo.subscribeCount | getCount }}人
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="com" v-if="albumInfo.des">
      <div class="tt_tit" @click="show">
        {{ albumInfo.customTitle
        }}<van-icon name="arrow-up" v-if="isShow" /><van-icon
          name="arrow-down"
          v-else
        />
      </div>
      <div v-if="!isShow" class="jian" v-html="albumInfo.des" 
     >
         <!-- style="
            font-size: 14px;
            line-height: 20px;
            font-family: Helvetica, Arial, sans-serif;
            color: #333333;
            font-weight: normal;
            text-align: left;
          " -->
      </div>
    </div>

    <div class="app">
      <shou-open></shou-open>
    </div>
  </div>
</template>

<script>
import { initzhuboDetailData } from "@/request/api.js";
export default {
  data() {
    return {
      isShow: true,
    };
  },
  props: {
    albumInfo: {
      type: Object,
    },
    id: {
      type: Number,
    },
    anchorId: {
      type: Number,
    },
    userInfo: {
      type: Object,
    },
  },
  watch: {
    anchorId: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log(val);
      },
    },
  },
  created() {},
  methods: {
    show() {
      this.isShow = !this.isShow;
    },

    goZhubo() {
      this.$router.push("/zhubo/" + this.anchorId);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.tt_wrap {
  width: 100%;
  //   height: 220px;

  .top {
    overflow: hidden;
    width: 100%;
    height: 220px;
    position: relative;
    margin-bottom: 6px;
    .box_img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      transform: scale(2);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      filter: blur(15px);
    }
    .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10000;
      .info {
        z-index: 100;
        height: 160px;
        padding: 30px 20px 10px;
        display: flex;

        .img {
          width: 95px;
          height: 95px;

          position: relative;
          > img {
            border-radius: 4px;
            width: 100%;
            height: 100%;
          }
          span {
            display: block;
            width: 24px;
            height: 100%;
            background: url(../../../assets/icon/common/album-bg.png) no-repeat;
            background-size: 100% 100%;
            top: 0px;
            right: -24px;
            position: absolute;
            z-index: 100;
          }
          .count {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 20px;
            width: 100%;
            background-image: linear-gradient(
              90deg,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, 0.25) 100%
            );
            text-align: right;
            color: #fff;
            font-weight: 700;
            font-size: 12px;
            padding-right: 6px;
            > i {
              margin-right: 7px;
            }
          }
        }

        .txt {
          flex: 1;
          padding-left: 24px;
          .title {
            font-size: 16px;
            color: #fff;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /*设置或检索伸缩盒子对象的子元素的排列方式*/
            -webkit-line-clamp: 2;
          }
          .author {
            height: 40px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(153, 153, 153, 0.4);
            .tou {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              overflow: hidden;
              > img {
                width: 100%;
                height: 100%;
              }
            }
            .name {
              color: #fff;

              padding-left: 8px;
              font-size: 12px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .count {
            height: 50px;
            font-size: 12px;
            color: #eee;
            line-height: 50px;
          }
        }
      }
    }
  }
  .com {
    padding: 12px 15px 10px;
    .tt_tit {
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
    }

    .tt_tit {
      // height: 22px;
      text-align: center;
      line-height: 22px;
      i {
        margin-left: 8px;
        color: #fa2800;
        font-weight: 700;
      }
    }

    /deep/.jian {
      img {
            width: 100% !important;
          }
        p {
          font-size: 14px !important;
          line-height: 21px !important;
          
        }
      
    }
  }
}
</style>

